<script>
  // Web 化接入搜索

        /*
            一、简介

                  本codelabs 会聚焦于小程序如何通过适配Web化方案，推送数据到抖音搜索，以便用户能搜索到更多小程序内容。


                  1、视频教程

                              视频地址：
                              
                              https://p9-arcosite.byteimg.com/obj/tos-cn-i-goo7wpa0wc/da51617414ca43e3a4bd202a5fdd5fc5


                  2、前提条件

                            ①、已经入住抖音开放平台，并且小程序已经上线

                            ②、已下载最新版本抖音小程序开发工具。

                            ③、已在抖音小程序控制台开启Web化功能，路径为：  【小程序控制台】---【运营】---【流量配置】---【小程序web化接入】


                            图示：

                                  https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716273912442

                            

                  3、目标效果

                          图示1：

                          https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716273914775

                          图示2：
                          https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716273914325


                  4、学习内容

                          ①、如何完成小程序的Web化的页面适配，包括开发、调试、上线。

                          ②、如何推送Web 化适配后的页面 sitemap 到平台。

                          ③、如何在小程序控制台进行Web化数据运营。
        */

        /*
             二、概念和原理

                      小程序web化接入搜索的链路如下：

                          1、开发者完成页面选取和适配，将需要收录的页面通过平台或者接口的形式推送给小程序平台。

                          2、小程序平台将开发者提交的指定小程序页面 (sitemap 格式) 转化成具体的H5页面 (该H5不会被用户访问到，仅给抖音爬虫访问)，

                                并对H5页面进行审核。审核通过后，小程序凭条将H5页面提交给抖音搜索爬虫。

                          3、抖音搜索爬虫会按照开发者设置的抓取频次抓取对应转化后的H5页面，经页面关键信息抽取出来存储到 "搜索索引库中"

                          4、在用户访问抖音App进行搜索时，抖音搜索会匹配到相关的索引库中的内容，并展示出小程序卡片。用户点击卡片后可直接跳转至开发者提交的小程序页面。
        */

        /*
             三、页面抓取

                      推荐选取 "偏图文类"的内容页面。
                      
                      具体来说通常是小程序内具体某个业务场景下的 内容详情页，例如新闻详情页面、汽车详情页面、小说简介页面、漫画简介页等。
        */

        /*
             四、页面适配

                      1、页面信息设置

                              页面信息包括  title、keywords、decription 等内容，未设置这些信息会影响爬虫抓取和算法理解效果。

                              通过 tt.setPageInfo 设置页面 Web 化后的页面信息，入参为：


                                属性名           类型         默认值            必填      说明                                                         最低支持版本

                              ①、title         string                           是      页面文章标题，根据页面的主要内容设置，且需要每个页面尽量唯一，     3.22。0
                                                                                        需要根据页面接口返回值进行设置。长度限制70字符。

                              ②、keywords      steing                           是      页面文章关键词，多个关键词之间使用英文逗号","隔开，               3.22.0

                              ③、description   steing                           是      页面文章摘要、描述信息。长度70字符。                             3.22.0

                              ④、success       function                         否      接口调用成功的回到函数。                                         3.22.0

                              ⑤、fail          function                         否      接口调用失败的回调函数。                                         3.22.0

                              ⑥、complete      function                         否      接口调用结束的回调函数。(调用成功、失败都会执行)                   3.22.0



                              ★、代码示例

                                        
                                            Page({
                                              onLoad() {
                                                const data = fetchData();
                                                tt.setPageInfo &&
                                                  tt.setPageInfo({
                                                    title: data.title,
                                                    keywords: data.keywords,
                                                    description: data.description,
                                                  });
                                              },
                                              fetchData() {
                                                // 具体的页面信息请求接口 tt.request();
                                                return {
                                                  title: "小程序web化接入",
                                                  description:
                                                    "Web化是平台通过技术手段帮助抖音小程序自动转化得到的一个 H5 版本的小程序，其功能与展示形式与小程序一致。在对小程序进行Web化后，小程序的页面就可以被搜索爬虫抓取，从而可以以自然结果的样式在搜索结果中展现。这个H5版本的小程序不会被普通用户直接访问到，仅用于被搜索的爬虫抓取内容。用户在C端访问时，点击搜索卡片后打开的仍然是小程序。",
                                                  keywords: "web化,搜索,小程序",
                                                };
                                              },
                                            });


                    2、页面调试

                              需进行IDE调试，以保证页面在Web化后渲染正常。

                              由于Web化后的页面时供爬虫抓取，Web化环境的特殊性导致其不支持"部分小程序能力"。

                              完成页面适配后，可以在IDE进行预览调试，本地验收效果。


                              抖音开发者工具提供测试版本支持 "Web化预览及配置检测"（https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/developer-instrument/debug/web-debug）


                              下载地址：

                                  https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/ide/package/obj/developer/ide/11826693/win32/抖音开发者工具-4.2.4-web.1.exe

                                  https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/ide/package/obj/developer/ide/11826693/darwin/抖音开发者工具-4.2.4-web.1-x64.dmg

                                  https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/ide/package/obj/developer/ide/11826693/darwin-arm64/抖音开发者工具-4.2.4-web.1-arm64.dmg


                              ★、使用示例

                                       <1>、如何使用开发者工具调试web化

                                                https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716275022425 

                                       <2>、页面渲染正常且正确设置页面信息，Web化检测全部通过，图示：

                                                https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716274981401

                                       <3>、页面渲染异常，Web化检测未通过，提示白屏：

                                                https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716274981158

                                       <4>、未正确设置页面信息，Web化检测未通过：

                                                https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716274981474

                                       <5>、若小程序使用不支持的能力，但不阻塞页面渲染，Web化检测通过并打印不支持能力调用次数：

                                                https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716274981268

                      
                    3、页面发布

                                在IDE万册会给你Web化页面适配后，需要把适配后的代码更新到线上，进行小程序正式版发布。


                                下一章节将介绍页面适配完成后，如何提交页面收录。
        */


        /*
           五、页面收录

                     1、抓取频次 Quota 设置

                              ★、重点说明：  抓取频次与提交的页面量关系，包括QPS的计算：

                                        图示：

                                              https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6ce30612f4814b8ea77894b83a02b999~tplv-goo7wpa0wc-quality:q75.awebp


                               <1>、页面提交数量

                                            单日提交的路径上限为 1000. 若有大量存量优质内容需要快速收录，可与对接运营或研发单独沟通。

                               <2>、爬虫抓取频次

                                             爬虫的抓取频次，可以在后台进行设置，建议抓取频次设置为每日提交页面数量的两杯。

                                             这是由于搜索之前会由治理完成审核，因此同样的页面会被请求两次。

                               <3>、QPS计算

                                           计算公式：

                                                  页面访问 QPS = Math.min (抓取上限，单日提交页面数量 * 2) / (24 * 60 * 60)。

                                                  开发者服务器的 QPS = 页面访问 QPS * 页面内的接口请求数。

                                            举例说明：

                                                    假如设置抓取频次上限为 80万次/天，单日提交页面数量为100万，那么实际入库数量每日为40万，页面访问的 QPS 为 800000/(24*60*60) 约等于 9.25，开发者服务器的 QPS 等于页面访问 QPS 9.25 * 页面内的接口请求数。

                                                    假如设置抓取频次上限为 200 万次/天，单日提交页面数量为 100 万，那么实际入库数量每日为 100 万，页面访问 QPS 为 2000000/(24*60*60)约等于 23。


                     2、页面提交

                                开发者可以像平台提交小程序 sitemap 文件，即有小程序页面地址所组成的文件，可通过在开发者平台上上传文件或通过服务端OpenAPI来提交页面。

                                文件用于标记哪些页面内容支持被抖音索引和搜索展示，

                                有如下格式和限制：

                                    ①、纯文本格式，每行填入一个路径，行与行之间分隔符为 '\n'

                                    ②、文件整体大小小于10M，路径数需要小于10w，单个路径大小需要小于200字节

                                    ③、路径需要符合小程序页面链接的path+query要求

                                ★、样例：
                                          pages/index/1?t=1
                                          pages/index/2?t=2
                                          pages/index/3?t=3
                                          ......

                                <1>、在开发者平台提交页面

                                          图示：

                                                https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716275324027


                                <2>、通过OpenAPI提交页面

                                          参考 "提交小程序页面路径" （https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/server/web-microapp/submit-paths）

                                          ★、代码示例：（java）
                                                      OkHttpClient client = new OkHttpClient().newBuilder()
                                                        .build();
                                                      MediaType mediaType = MediaType.parse("application/json");
                                                      RequestBody body = RequestBody.create(mediaType, "{\"app_id\":\"tt5daf2b12c285xxxx\",\"page_paths\":[\"pages/index/1?t=1\",\"pages/index/2?t=2\",\"pages/index/3?t=3\"]}");
                                                      Request request = new Request.Builder()
                                                        .url("https://open.douyin.com/api/apps/v1/search/upload_sitemap/")
                                                        .method("POST", body)
                                                        .addHeader("access-token", "clt.78743ab256619da1fde8efabfb7c50da1jJz6mjqx0xwukNHcIdhIKWaAbOU_lq")
                                                        .addHeader("Content-Type", "application/json")
                                                        .build();
                                                      Response response = client.newCall(request).execute();


                     3、索引删除

                                开发者可向平台提交需要删除的 "已索引资源"，包括死链、抵制及不希望在抖音搜索中展现的内容，

                                提交内容将在抖音搜索结果中屏蔽，该屏蔽操作将在30分钟后生效。

                                可通过"开发者平台" 或 "服务端OpenAPI" 来删除索引。

                                注意以下两点：

                                        ①、删除的索引无法再恢复

                                        ②、提交的文件格式类似  sitemap 文件格式

                                <1>、在开发者平台删除索引

                                            图示：

                                                  https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716275324178

                                <2>、通过OpenAPI 删除索引

                                            参考 "删除索引"  (https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/server/web-microapp/delete-index)


                                            示例代码：（java）
                                                        OkHttpClient client = new OkHttpClient().newBuilder()
                                                          .build();
                                                        MediaType mediaType = MediaType.parse("application/json");
                                                        RequestBody body = RequestBody.create(mediaType, "{\"app_id\":\"tt5daf2b12c285xxxx\",\"name\":\"index\",\"path_list\":[\"pages/index/1?t=1\",\"pages/index/2?t=2\",\"pages/index/3?t=3\"]}");
                                                        Request request = new Request.Builder()
                                                          .url("https://open.douyin.com/api/apps/v1/search/delete_index/")
                                                          .method("POST", body)
                                                          .addHeader("access-token", "clt.78743ab256619da1fde8efabfb7c50da1jJz6mjqx0xwukNHcIdhIKWaAbOU_lq")
                                                          .addHeader("Content-Type", "application/json")
                                                          .build();
                                                        Response response = client.newCall(request).execute();
        */

        /*
            六、数据运营

                        在完成页面收录后，开发者可以在"小程序控制台" 查看具体的数据指标，

                        其中包括页面爬取状态、页面收录数据、小程序搜索卡片的曝光量和点击量：

                              图示：

                                   https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/img1716275769079
                                   
                        
        */
</script>